<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: zhaoziyin
 * @LastEditTime: 2022-09-12 11:54:19
-->
<template>
  <div class="main">
    <!-- 头部 -->
    <Header></Header>

    <!-- 图片 -->
    <div class="imges">
      <el-carousel :interval="5000" arrow="always" height="514.42px">
        <el-carousel-item>
          <img src="../assets/220826.jpg" alt="" srcset="" />
        </el-carousel-item>
        <el-carousel-item>
          <img
            style="height: 100%; width: 100%"
            src="../assets/220901.jpg"
            alt=""
            srcset=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 新闻 -->
    <div class="news">
      <div class="news_tittle wrapper">
        <div class="newsTittle_left">
          <h2 @click="toArticle()">工大要闻</h2>
          <p>更多></p>
        </div>
        <div class="newsTittle_right">
          <p>新闻网&nbsp;></p>
        </div>
      </div>
      <div class="news_body wrapper">
        <div class="newsBody_left">
          <ul>
            <li v-for="item in leftNews" :key="item.id">
              <img :src="item.url" alt="" srcset="" />
              <p>
                {{ item.introduce }}
              </p>
            </li>
          </ul>
        </div>
        <div class="newsBody_right">
          <ul>
            <li v-for="item in rightNews" :key="item.id">
              <span>{{ item.title }}</span>
              <p class="last">08-{{ date }}</p>
            </li>
            <li v-for="item in rightNews" :key="item.index">
              <span>{{ item.title }}</span>
              <p class="last">08-{{ date }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 学术交流 -->
    <div class="academic_exchange">
      <div class="box wrapper">
        <div class="academic">
          <div class="academicTittle_left">
            <h2>学术交流</h2>
          </div>
          <div class="academicTittle_body">
            <ul>
              <li v-for="item in academicNews" :key="item.id">
                <p>{{ item.title }}</p>
                <p>08-15</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="media">
          <div class="mediaTittle_left">
            <h2>媒体工大</h2>
          </div>
          <div class="mediaTittle_body">
            <ul>
              <li v-for="item in mediaNews" :key="item.id">
                <p v-text="item.title"></p>
                <p>08-15</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 数字校园 -->
    <div class="digital">
      <div class="digital_campus wrapper">
        <ul>
          <li>
            <img src="https://www.nwpu.edu.cn/images/20210324dsjyxi.png" />
          </li>
          <li>
            <img src="https://www.nwpu.edu.cn/images/20220530222638.png" />
          </li>
          <li>
            <img src="https://www.nwpu.edu.cn/images/pic20220426.png" />
          </li>
          <li>
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-bec264f3e7ab424c29acec382dc1984d_r.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664888270&t=227054d065eb265df280482c5a478f9f"
            />
          </li>
          <li>
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.itc.cn%2Fimages01%2F20210609%2F8617c92a1d3644b0abe2f59ebd65a81d.png&refer=http%3A%2F%2Fp6.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664888356&t=e954f871ece23b685d0d3d59e27bd76d"
            />
          </li>
          <li>
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-86b484a005cfee56168faccb22f0d756_hd.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664888432&t=0f656d53f7b226df0bc6317d057f0d60"
            />
          </li>
          <li>
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20190820ac%2F718%2Fw640h878%2F20190820%2Fc0d4-icmpfxa5887757.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664888481&t=949c4d424ca84c308ea96885c531e389"
            />
          </li>
          <li>
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F65516769%2Fdbecd274350a475cbda41509691c92f7.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNjU1MTY3NjkvZGJlY2QyNzQzNTBhNDc1Y2JkYTQxNTA5NjkxYzkyZjcuanBn%2Fsign%2Fe3bbd26fd371da2d337415fbe1ad79b9.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664888521&t=47888b0410b6687fbe3b9a7ca6ce0b1b"
            />
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>
<script>
import { get, post } from "../utils/request";
export default {
  data() {
    return {
      date: 17,
      leftNews: [],
      rightNews: [],
      academicNews: [],
      mediaNews: [],
    };
  },
  methods: {
    // 请求新闻左边部分
    async getLunbo() {
      let res = await get("/index/carousel/findAll");
      this.leftNews = res.data;
    },

    // 请求右边部分新闻
    async getRightNews() {
      let params = { categoryId: 4 };
      let res = await get("/index/article/findHotArticles", params);
      this.rightNews = res.data;
    },

    // 请求学术交流
    async getAcademicNews() {
      let params = { categoryId: 5 };
      let res = await get("/index/article/findHotArticles", params);
      this.academicNews = res.data;
    },

    // 媒体消息
    async getMediaNews() {
      let params = { categoryId: 6 };
      let res = await get("/index/article/findHotArticles", params);
      this.mediaNews = res.data;
    },
    // 跳转到栏目信息页面
    async toArticle() {
      let na = '工大要闻'
      // 编程式导航跳转
      this.$router.push({
        path: "/article", 
        query: {name:na},
      });
    },
  },
  created() {
    this.getLunbo();
    this.getRightNews();
    this.getAcademicNews();
    this.getMediaNews();
  },
};
</script>
<style scoped lang="less">
// 图片
.imges {
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}

// 新闻
.news {
  overflow: hidden;
  height: 680px;
  margin-top: 30px;
  .news_tittle {
    display: flex;
    height: 60px;
    line-height: 60px;
    color: #2267b1;
    border-bottom: 2px solid #f2f2f2;
    .newsTittle_left {
      width: 743px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      h2:hover{
        cursor: pointer;
      }
      p {
        font-weight: bold;
      }
    }
    .newsTittle_right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      p {
        font-size: 20px;
      }
    }
  }
  .news_body {
    display: flex;
    align-items: center;
    .newsBody_left {
      width: 768px;
      ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        li {
          overflow: hidden;
          width: 369px;
          height: 283px;
          margin-top: 7px;
          border: 2px solid #f3f3f3;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          background-color: #fbfbfb;
          img {
            width: 100%;
            height: 195px;
            transition: transform 1s;
          }
          p {
            height: 88px;
            width: 320px;
            margin: 15px auto;
            font-size: 16px;
            color: #395f94;
          }
        }
        li:hover p {
          color: #444bff;
        }
        li:hover img {
          transform: scale(1.1);
        }
      }
    }
    .newsBody_right {
      flex: 1;
      height: 570px;
      margin-left: 20px;
      ul {
        li {
          width: 100%;
          height: 56px;
          background-color: #fff;
          border-bottom: 1px solid #d3d1d1;
          line-height: 56px;
          span {
            display: inline-block;
            width: 355px;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            color: #2267b1;
            // line-height: 56px;
          }
          .last {
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
            // line-height: 56px;
          }
        }
        li:hover span {
          color: #444bff;
        }
      }
    }
  }
}

// 学术交流
.academic_exchange {
  width: 100%;
  height: 410px;
  background-color: #f1f7ff;
  .box {
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: space-between;
    // align-content: center;
    align-items: center;
    .academic,
    .media {
      width: 600px;
      height: 335.2px;
    }
    h2 {
      color: #2267b1;
    }
    ul {
      width: 574px;
      height: 264px;
      margin: 0 auto;
      margin-top: 30px;
      li {
        height: 48px;
        // background-color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 15px;
        p {
          font-size: 16px;
        }
        p:first-child {
          width: 450px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        p:last-child {
          flex: 1;
          text-align: center;
        }
      }
      li:hover {
        border: 1px solid #dfebfb;
        color: #2267b1;
        background-color: #fff;
      }
    }
  }
}

// 数字校园
.digital {
  height: 806px;
  background: url("../assets/body.jpg") no-repeat;
  display: flex;
  align-items: center;
  .digital_campus {
    width: 1200px;
    height: 600px;
    // background-color: pink;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        overflow: hidden;
        width: 300px;
        height: 300px;
        img {
          width: 100%;
          height: 100%;
          transition: transform 1s;
        }
      }
      li:hover img {
        transform: scale(1.1);
      }
    }
  }
}
</style>